<!-- 漏斗图 -->
<template>
	<div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from "echarts";

export default {
	props: {
		className: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '250px'
		},
		dataZoom: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default() {
				return {}
			}
		},
	},
	data() {
		return {
			chart: null
		}
	},
	mounted() {
		setTimeout(() => {
			this.initChart()
		}, 20)
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
	},
	watch: {
		data(newData, oldData) {
			this.initChart();
		},
	},
	methods: {
		initChart() {
            var rightArrow = "image://";
            var uploadedDataURL = "/asset/get/s/data-1576742942370-X6JMK0GY.png";
            var colors = ['#2BA4FD', '#36CF82', '#FE8441', '#FFB637', '#FFCE95', '#9692ff'];

            var markLineSetting = {
                normal: {
                    show: true,
                    backgroundColor: 'none',
                    borderRadius: 4,
                    color: '#333',
                    verticalAlign: 'middle',
                    offset: [80, 0, 0, 0],
                    fontSize: 14,
                    padding: [3, 10, 5, 10],
                    formatter: function(d) {
                        console.log(d)
                        if (d.value) {
                            var ins = '{img1|} ' + '{words|' + d.data.itemValue + '}';
                            return ins
                        }
                    },
                    rich: {
                        img1: {
                            backgroundColor: {
                                image: uploadedDataURL,
                            },
                            width: 18,
                            height: 16
                        },
                        words: {
                            color: '#333',
                            fontSize: 14,
                            lineHeight: 20,
                            padding: [0, 0, 5, 0],
                        }
                    }
                }
            }
            var lineargroup = [{
                    value: 100,
                    name: '项目可行性研究',
                    number: 98756,
                },
                {
                    value: 80,
                    name: '项目洽谈环节',
                    number: 88756,
                },
                {
                    value: 60,
                    name: '项目准入环节',
                    number: 78756,
                },
                {
                    value: 40,
                    name: '项目上会环节',
                    number: 68756,
                },
                {
                    value: 20,
                    name: '签约入园环节',
                    number: 58756,
                }
            ];
            var data1 = [];

            for (var i = 0; i < lineargroup.length; i++) {
                var obj1 = {
                    value: lineargroup[i].value,
                    num: lineargroup[i].number,
                    name: lineargroup[i].name
                };
                
                data1.push(obj1);

            }

			this.chart = echarts.init(this.$el)

			let option = {
                color: colors,
                // tooltip: {
                //     trigger: "item",
                //     formatter: "{b} : {c}%"
                // },
                grid: {
                    top: '0',
                    left: "2%",
                    right: 20,
                    height: "336",
                    bottom: '10',
                    //  containLabel: true
                },
                xAxis: [{
                        show: false,
                        inverse: true,
                        position: 'top',
                    },
                    {
                        position: 'bottom',
                        show: false,
                        min: 115,
                        max: 200
                    }
                ],
                yAxis: [{
                        position: 'left',
                        top:'120',
                        show: false,
                        boundaryGap: false,
                        inverse: true,
                        type: "category",
                        min: '转化率1',
                        data: ["转化率1", "转化率2", "转化率3", "转化率4", "转化率5"]
                    }
                ],
                series: [{
                        top: 0,
                        type: 'funnel',
                        height: '400',
                        gap: 10,
                        minSize: 100,
                        left: '10%',
                        width: '60%',
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: '18',
                            color: '#fff',
                            formatter: function(d) {
                                var ins = d.name + '{aa|}\n' + d.data.num;
                                return ins
                            },
                            rich: {
                                aa: {
                                    padding: [8, 0, 6, 0]
                                }
                            }
                        },
                        data: data1
                    },
                    {
                        top: '20%',
                        name: 'youcejiantou',
                        type: 'pictorialBar',
                        symbolPosition: 'center',
                        symbolSize: ['73', '77'],
                        symbol: rightArrow,
                        symbolClip: true,
                        xAxisIndex: '1',
                        z: 1,
                        data: [
                            {
                                value: 0,
                                itemValue: '转化率：50%',
                                show: false,
                                label: markLineSetting,
                            },
                            {
                                value: 360,
                                itemValue: '转化率：50%',
                                label: markLineSetting,
                            },
                            {
                                value: 350,
                                itemValue: '转化率：40%',
                                label: markLineSetting,
                            },
                            {
                                value: 340,
                                itemValue: '转化率：20%',
                                label: markLineSetting,
                            },
                            {
                                value: 330,
                                itemValue: '转化率：10%',
                                label: markLineSetting,
                            },
                        ]
                    },
                ]
                
			}
			this.chart.setOption(option);
            window.addEventListener("resize", () => {
                this.chart.resize();
            });
		}
	}
}

</script>